@use "theme/globals" as *;

:host {

    .addon-messages-unreadfrom {
        color: var(--primary);
        background-color: transparent;
        margin-top: 6px;
        margin-left: auto;
        margin-right: auto;
        ion-icon {
            color: var(--primary);
            background-color: transparent;
        }
    }

   .has-fab .scroll-content {
        padding-bottom: 0;
    }

    ion-fab .core-discussion-messages-badge {
        position: absolute;
        color: var(--addon-messages-discussion-badge-text);
        background-color: var(--addon-messages-discussion-badge);
        display: block;
        @include position(0px, 0px, null, null);
    }

    ion-header ion-toolbar ion-title {
        padding: 0px;

        h1 {
            display: flex;
            align-items: center;
            padding: 0px;

            .core-bar-button-image {
                --userpicture-padding: 4px;
                @include margin-horizontal(null, 6px);
            }

            // Group avatar.
            img.core-bar-button-image {
                padding: var(--userpicture-padding);
                width: var(--core-header-toolbar-button-image-size);
                height: var(--core-header-toolbar-button-image-size);
                max-width: var(--core-header-toolbar-button-image-size);
                max-height: var(--core-header-toolbar-button-image-size);
                border-radius: var(--core-avatar-radius);
                display: block;
            }

            core-format-text {
                @include ellipsis();
                flex-shrink: 1;
                display: block;
            }

            ion-icon {
                @include margin-horizontal(6px, null);
            }
        }
    }
}

:host-context(.ios) {
    ion-header ion-toolbar h1 {
        justify-content: center;
    }
}
